<template>
	<view class="content">
		<view class="details">
			<view class="head">
				<image src="../../../../static/YunCangImg/sing.png"></image>
				<view class="head_data">
					<image src="../../../../static/YunCangImg/sing.png"></image>
					<view class="head_right">
						<h5>薇娅</h5>
						<view>
								<text>带货</text>
								<text>千万网红</text>
								<text>实力大v</text>
						</view>
					</view>
				</view>
			</view>
			<view class="subject">
				<view class="introduce">
					<view class="introduce_title">
						<image src="../../../../static/YunCangImg/user.png"></image>
						<h5>个人介绍</h5>
					</view>
					<view class="dateContent">
						<text>
							1985年9月7日出生于安徽省庐江县，主播、歌手全国青联
							委员，2019年3月25日，获得“国家的宝藏妙物官”称号；
						</text>
						<image src="../../../../static/YunCangImg/14.png"></image>
					</view>
				</view>
				<view class="Specialty">
					<view class="introduce_title">
						<image src="../../../../static/YunCangImg/sing.png"></image>
						<h5>个人介绍</h5>
					</view>
					<view class="dateContent">
						<text>
							爱唱歌、跳民族舞、热爱小动物等
						</text>
					</view>
				</view>
				<view class="interest">
					<view class="introduce_title">
						<image src="../../../../static/YunCangImg/experience.png"></image>
						<h5>个人介绍</h5>
					</view>
					<view class="dateContent">
						<text>
							爱唱歌、跳民族舞、热爱小动物等 拷贝
						</text>
					</view>
				</view>
				<view class="glory">
					<view class="introduce_title">
						<image src="../../../../static/YunCangImg/w_@2x.png"></image>
						<h5>个人介绍</h5>
					</view>
					<view class="dateContent">
						<text>
							2019年3月25日，获得“国家的宝藏妙物官”称号
						</text>
					</view>
				</view>
			</view>
			<view class="bottom">
				<text>我想联系Ta</text>
			</view>
		</view>
	</view>
</template>

<script>
</script>

<style lang="less">
	.content{
		.details{
			background: #f2f2f2;
			.head{
				width: 100%;
				height: 400upx;
				position: relative;
				image{
					width: 100%;
					height: 400upx;
					position: absolute;
					top: 0;
					z-index: -1;
					background: #C8C7CC;
				}
				.head_data{
					top: 60%;
					left: 4%;
					display: flex;
					position: absolute;
					image{
						width: 120upx;
						height: 120upx;
						border-radius: 50%;
						border: 1px solid;
					}
					.head_right{
						    margin-left: 20%;
						    width: 710upx;
							h5{
								width: 64upx;
								height: 32upx;
								font-size: 32upx;
								font-family: Microsoft YaHei UI;
								font-weight: 400;
								color: #FFFFFF;
								margin-bottom: 20upx;
							}
							uni-text{
								background: linear-gradient(136deg, #EC954E, #FC3985);
								border-radius: 30upx;
								color:#FFFFFF;
								font-size: 22upx;
								padding: 4upx 20upx;
								margin-right: 20upx;
							}
					}
				}
			}
			.subject{
				width: 100%;
				background: #FFFFFF;
				box-shadow: 0px 3upx 29upx 1upx rgba(212, 212, 212, 0.35);
				border-radius: 25upx;
				position: relative;
				top: -14upx;
				.introduce_title{
					display: flex;
					padding: 40upx 0 0 20upx;
					image{
						width: 60upx;
						height: 60upx;
					}
					h5{
						width: 120upx;
						height: 30upx;
						font-size: 30upx;
						font-family: Microsoft YaHei UI;
						font-weight: bold;
						color: #333333;
						margin: 10upx 0;
					}
				}
				.dateContent{
					padding: 20upx 50upx 20upx 68upx;
					uni-text{
						width: 612upx;
						height: 53upx;
						font-size: 24upx;
						font-family: Microsoft YaHei UI;
						font-weight: 400;
						color: #333333;
					}
					image{
						width: 630upx;
						height: 328upx;
						border-radius: 20upx;
					}
				}
			}
			.bottom{
				width: 100%;
				height: 200upx;
				background:#F2F2F2;
				uni-text{
					background: linear-gradient(0deg, #E50012, #DF3F29);
					border-radius: 44upx;
					color: #FFFFFF;
					font-size: 36upx;
					padding:20upx 100upx;
					    position: relative;
					    top: 35%;
					    left: 25%;
				}
			}
		}
	}
</style>
